<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>购物商城</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="../scss/order.css">
  <link rel="stylesheet" href="../scss/header.css">
  <style>
    * {
      margin: 0 auto;
      padding: 0;
      list-style: none;
    }

    .header-a {
      text-decoration: none;
      color: #CCCCCC;
    }

    li {
      float: left;
      width: 6.25%;
      text-align: center;
      line-height: 30px;


    }

    li a {
      color: #FFFFFF;
      font-size: 12px;
      text-decoration: none;
    }

    li a:hover {
      color: #FFFF00;
    }

    a:hover {
      color: black;
    }
  </style>

</head>

<body>

  <div>
    <!--头页面的第一部分-->
    <div class="header-box">
      <div class="header" style="width: 1200px;height: 32px;font-size: 12px;line-height: 32px;text-align: right;">
        <!-- 官方网站：<a href="http://gz.gec-edu.org/?gzbdgzbdyueqianpc23"> http://gz.gec-edu</a> -->
        <a href="./login.html">登录</a>
        <a href="./register.html">免费注册</a>
        <a href="#">我的购物车</a>
        <a href="#">我的订单</a>
        <a href="#">设置为首页</a>
        <a href="#">加入收藏</a>
      </div>
    </div>
    <!--头页面的第二部分-->
    <div style="width: 1200px;height: 110px;position: relative">
      <img src="../images/logo.gif" alt="">
      <img src="../images/banner.gif" alt="" style="margin-top: 10px;">

      <div style="position: absolute;right: 50px;top: 30px;font-size: 12px;">
        <div style="border: 1px solid #CCCCCC;width: 70px;height: 20px;line-height: 20px;text-align: center">
          <a href="#" class="header-a">关于我们</a></div>
        <div
          style="margin-top: 10px;border: 1px solid #CCCCCC;width: 70px;height: 20px;line-height: 20px;text-align: center">
          <a href="#" class="header-a">联系方式</a></div>
      </div>

    </div>
    <!--头页面的第三部分-->
    <div style="width: 100%;height: 30px;background-color: #CC3333">
      <div style="width: 1200px;height: 30px;">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">护肤</a></li>
          <li><a href="#">彩妆</a></li>
          <li><a href="#">香氛</a></li>
          <li><a href="#">身体护理</a></li>
          <li><a href="#">礼盒套装</a></li>
          <li><a href="#">母婴专区</a></li>
          <li><a href="#">男士专区</a></li>
          <li><a href="#">粉底</a></li>
          <li><a href="#">粉饼</a></li>
          <li><a href="#">睫毛膏</a></li>
          <li><a href="#">唇彩</a></li>
          <li><a href="#">腮红</a></li>
          <li><a href="#">食品保健</a></li>
          <li><a href="#">瘦身类</a></li>
          <li><a href="#">美容类</a></li>
        </ul>
      </div>
    </div>
  <!-- 主内容 -->
  <div class="main">
    <h4>填写核对订单信息</h4>
    <header>
      <h5>收货人信息</h5>
      <p><span>收货人姓名：</span><input placeholder="请填写收货人姓名" /></p>
      <p><span>地址：</span><input placeholder="请填写地址" /></p>
      <p><span>电话号码：</span><input placeholder="请填写您的手机号码" />(用于接收发货通知短信及送货的确认)</p>
      <p><span>电子邮件：</span><input placeholder="请填写您的电子邮件" />(用于提醒)</p>
      <p><span>邮政编码：</span><input placeholder="请填写所在的邮政编码" />(确定收货地址)</p>
      <button style="cursor: pointer;">保存收获人信息</button>
    </header>
    <div class="pay">
      <p>支付及配送方式</p>
      <p><span>支付方式：</span>在线支付</p>
      <p><span>配送方式：</span>快递运输</p>
      <p><span>运费：</span>0.00元</p>
    </div>
    <figure>
      <figcaption><h5><span>商品清单</span><a href="">返回修改购物车</a></h5></figcaption>
      <table>
        <tr>
          <th>商品名称</th>
          <th>疯狂价</th>
          <th>返现</th>
          <th>小计</th>
          <th>库存</th>
          <th>数量</th>
        </tr>
        <tr>
          <td>Vans范斯 经典系列 Old Skool板鞋运动鞋 低帮经典款男女官方正品</td>
          <td>￥100.00</td>
          <td>￥00.00</td>
          <td>￥100.00</td> 
          <td>1088</td>
          <td>1</td>
        </tr>
      </table>
    </figure>
    <div class="info">
      <h5>结算信息</h5>
      <div class="info-main">
        <div>商品金额： 100.00元 + 运费： 0.00元 - 优惠券： 0.00元 - 礼品卡： 0.00元 - 返现： 0.00元</div>
        <span style="font-weight: bold; text-align: right; width: 100%; display: inline-block; font-size: 26px;">应付总额: <span style="color: #CC3333;">￥100.00</span>元</span>
      </div>
      <img style="display: block; cursor: pointer;" src="../images/submit.jpg" alt="">
    </div>
  </div>
  <div id="footer">
    <section class="footer_top">
        <section class="footer_top_content">
            <aside>
                <h3>客服热线(免长途费)</h3>
                <em>400 116 11111</em>
                <p>客服时间：9：00-24：00</p>
                <p>周末/周日：10：00-24：00</p>
                <figure>
                    <figcaption><img src="../images/erweima_03.png" alt=""></figcaption>
                    <p>购物商城</p>
                </figure>
                <figure>
                    <figcaption><img src="../images/erweima_03.png" alt=""></figcaption>
                    <p>购物商城</p>
                </figure>
            </aside>
            <article>
                <section class="footer_top_content_article_top">
                    <div><img src="../images/2014052815002.png" alt=""></div>
                    <div><img src="../images/2014052815003.png" alt=""></div>
                    <div><img src="../images/2014052815004.png" alt=""></div>
                    <div><img src="../images/2014052815005.png" alt=""></div>
                </section>
                <section class="footer_top_content_article_bottom">
                    <ul>
                        <li>支付方式</li>
                        <li>在线支付</li>
                        <li>货到付款</li>
                        <li>发票说明</li>
                    </ul>
                    <ul>
                        <li>支付方式</li>
                        <li>在线支付</li>
                        <li>货到付款</li>
                        <li>发票说明</li>
                    </ul>
                    <ul>
                        <li>支付方式</li>
                        <li>在线支付</li>
                        <li>货到付款</li>
                        <li>发票说明</li>
                    </ul>
                    <ul>
                        <li>支付方式</li>
                        <li>在线支付</li>
                        <li>货到付款</li>
                        <li>发票说明</li>
                    </ul>
                </section>

            </article>
        </section>
    </section>
    <section class="footer_bottom">
        <span> Copyright © 2008-2014  All Rights Reserved.Copyright © 2008-2014  All Rights Reserved.Copyright © 2008-2014  All Rights Reserved.</span>
    </section>
  </div>
</body>

</html>